<template>
    <ul class="listview">
        <li class="head">
            <span class="first">类型</span>
            <span class="second">摘要</span>
        </li>
        <div class="rollbody"
            @mouseover="stopScroll(true)"
            @mouseout="stopScroll(false)">
            <!-- <div id="roll_container" class="list-body" :style="{'margin-top':-marginTop +'px'}"> -->
            <li v-for="item in list"
                :key="item.key"
                class="body"
                :title="item.name"
                @click="clickHandle(item)">
                <span class="first">{{item.type}}</span>
                <span class="second">{{item.name}}</span>
            </li>
            <!-- <li v-for="item in list" :key="'bak_' + item.key" class="body" :title="item.name">
                    <span class="first">{{item.type}}</span>
                    <span class="second">{{item.name}}</span>
                </li> -->
            <!-- </div> -->
        </div>
    </ul>
</template>
<script>
export default {
    name: 'ListView',
    data() {
        return {
            marginTop: 0,
            stepTime: 60,
            stop: false,
            stepValue: 3
        };
    },
    props: {
        list: Array
        //clickItem: Function,
        //close: Function
    },
    created() {
        // this.stepNext();
    },
    methods: {
        stepNext() {
            if (!this.stop) {
                this.marginTop += this.stepValue;
                var height = $('#roll_container').height() / 2;
                if (this.marginTop >= height) {
                    this.marginTop -= height;
                }
            }
            setTimeout(() => {
                this.stepNext();
            }, this.stepTime);
        },
        stopScroll(flag) {
            this.stop = !!flag;
        },
        clickHandle(item) {
            this.$emit('clickItem', item);
        }
    }
};
</script>
<style scoped>
.listview {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid blue;
    /* overflow: hidden; */
    overflow-y: auto;
    display: flex;
    flex-flow: column nowrap;
}

.head {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.5rem;
    border-bottom: 1px solid blue;
    flex-shrink: 0;
}
.head .first {
    margin-left: 0.3rem;
}
.head .second {
    margin-right: 2.6rem;
}
.rollbody {
    cursor: pointer;
    flex-grow: 1;
    /* overflow: hidden; */
    overflow-y: auto;
}
.rollbody::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0.05rem; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.rollbody::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 0.01rem;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}
.rollbody::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0.01rem;
    background: #ededed;
}

.list-body {
    width: 100%;
    height: 100%;
}

.body {
    height: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.body:hover {
    background: rgb(10, 38, 64);
}
.body .first {
    width: 25%;
    margin-left: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
}
.body .second {
    width: 70%;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
</style>
